iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 15

【Day15】Enzyme的兩個常用渲染API及Jest的幾個API,和..設計測試的幾個要點 (・θ・)

  • 分享至 

  • xImage
  •  

為了讓我們的測試看起來乾淨,就跟寫Code一樣,
淺顯易懂是原則,所以我們要把握以下兩點!

  • DRY(Don't Repeat Yourself) => 將重複的code寫成共用function,靠傳入的參數並將結果進行return
  • 寫上Test和Test Function的註解 => 單元測試的名稱最好就可以描述該測試所執行的內容

先來介紹Enzyme 的Shallow 和 Mount 兩個渲染的API吧~

  • Shallow: 適用於單元測試,而且可以確保我們的測試不會影響任何子類別Component的行為

    • 傳入的是整個要測試的Component

    • 比較常用的function

      • find() : 在渲染出來的Component上面找尋某個節點
      • filter() : 在渲染出來的Component上過濾掉某的節點
      • contains() : 看看某個節點是否有出現在渲染出來的Component上
      • hasClass() : 判斷某個節點上是否含有某個Class ( 跟jquery的hasClass一樣 )
  • Mount: 適用於有多個Component會互相影響的時候,
    使用這種渲染方式在測試裡,被用到的DOM都會互相影響

    • 傳入的參數和常用的function其實和shallow一樣,差別只是在於不同的用途

再來介紹幾個 JEST的function吧~

  • expect() : 用來測試某個值,通常會搭配其他function,很少會單單只呼叫這個function
  • toBe() : 測試某個值是不是符合自己期望的值,傳入的是自己期望的值 (可以搭配expect作使用)
  • toEqual() : 測試 expect的值是不是跟傳入的值相等
  • toHaveLength() : 測試某個值是不是符合所要的長度,傳入的是數字

上面是Enzyme 兩個渲染API的比較和 JEST的一些function的簡單介紹,
後續在寫測試的時候都會用到~

下一篇! 要來說明怎麼樣讓同樣的Code寫成共用function,
讓我們的測試Code看起來簡潔有力,

用的會是我們最最最基本的兩個function

  • 渲染Component的function
  • 尋找節點的function

上一篇
【Day14】利用Ezyme來跑個小小測試,還有..測試權衡是蝦咪東東 (•ө•)!!?
下一篇
【Day16】單元測試不用每次都寫一樣的東西吧!? 把常用的function寫成共用的吧୧☉□☉୨!
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言